const title1 = {
    type: 'title1',
    level: Number||String,
    children: [{ text: '' }]
}
//   渲染元素到编辑器
function renderTitle1(elem, children, editor) {   
    const {  level = '' } = elem;                                    // JS 语法
    const spanVnode = h(
        // HTML tag
        'span',
        // HTML 属性、样式、事件
        {
            props: { contentEditable: false }, // HTML 属性，驼峰式写法
            style: {
                float: "left",
                margin: "7px 0px",
                borderWidth: '6px',
                borderStyle: "solid",
                borderColor: "transparent transparent transparent red",
                userSeletct: "none",
                "unicode-bidi": "isolate",
                "-webkit-user-seletct": "none",
                "-moz-user-seletct": "none",
                /* 其他... */
            },              // style ，驼峰式写法
        }
    )

    const span2Vnode = h(
        // HTML tag
        'span',
        // HTML 属性、样式、事件
        {
            props: {  }, // HTML 属性，驼峰式写法
            style: { fontWeight: 700,fontSize: "20px"  }, // style ，驼峰式写法
        }, children
    )
    // 附件元素 vnode
    const titleVnode = h(
        // HTML tag
        'div',
        // HTML 属性、样式、事件
        {
            props: { fontSize: "20px"}, 
            dataset:{level:level},// HTML 属性，驼峰式写法
            style: {  /* 其他... */ }, // style ，驼峰式写法
        },
        // 子节点
        [spanVnode, span2Vnode]
    )
    return titleVnode
}
const renderTitle1Conf = {
    type: 'title1', // 新元素 type ，重要！！！
    renderElem: renderTitle1,
}
//   getHtml时传值
function title1ToHtml(elem, childrenHtml) {                             // JS 语法
    // 获取附件元素的数据
    const { level } = elem
    // 生成 HTML 代码
    const html = `<div
          data-w-e-type="title1"
          style="font-size:20px;font-weight: 700;"
          data-level="${level}"
      ><span 
      contentEditable=false
      style="float: left;width:20px;margin: 7px 0px;border-width: 6px;border-style: solid;border-color: transparent transparent transparent red;">
      </span>${elem.children[0].text}</div>`
    return html
}
const title1ToHtmlConf = {
    type: 'title1', // 新元素的 type ，重要！！！
    elemToHtml: title1ToHtml,
}

function parseTitle1Html(
    elem,
    children,
    editor) {
    const $elem = $(elem)
    const level = elem.getAttribute('data-level') || 1
    if (children.length === 0) {
        children = [{ text: $elem.text().replace(/\s+/gm, ' ') }]
    }
    const myTitle1 = {
        type: 'title1',
        level:level,
        children, // void node 必须有 children ，其中有一个空字符串，重要！！！
      }
    
      return myTitle1
}

const parsetitle1HtmlConf = {
    selector: `div[data-w-e-type="title1"]`, // data-w-e-type 属性，留给自定义元素，保证扩展性
    parseElemHtml: parseTitle1Html,
}
